<template>
    <!-- 热门推荐之“全部”菜单项显示内容 -->
    <div class="free-all-contrainer">
        <el-row class="free-all-condition">
            <span><strong>&ensp;&ensp;&ensp;条件：</strong></span>
            <el-radio-group v-model="isFree" @change="findArticleBriefs">
                <el-radio :label=0>免费</el-radio>
                <el-radio :label=1>付费</el-radio>
            </el-radio-group>
        </el-row>
        <el-row class="free-all" v-for="(category,categoryIndex) in categories" :key="categoryIndex">
            <el-row>
                <i class="el-icon-position" />&ensp;&ensp;{{category}}
            </el-row>
            <el-row class="free-all-details">
                <el-col :lg="11" v-for="(articleBrief,index) in articleBriefs[category]" :key="index">
                    <el-row>
                        <el-col :lg="6"><el-image :src= articleBrief.img @click="watchContent(category, articleBrief)" /></el-col>
                        <el-col :lg="17" class="free-all-detail">
                            <div>
                                 <span class="free-all-detail-title" @click="watchContent(category, articleBrief)"><strong>{{articleBrief.title}}</strong><el-avatar v-if="isFree == 1" :size="16" :src="require('@/assets/charge.png')"/></span>
                            </div>
                            <div class="free-all-detail-info">
                                <el-avatar :size="24" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                                <span>{{articleBrief.author}}</span>
                                <span>&ensp;<i class="el-icon-view"/>浏览&ensp;{{articleBrief.glanceNum}}</span>
                                <span>&ensp;<i class="el-icon-chat-dot-round"/>评论&ensp;{{articleBrief.commentNum}}</span>
                                <span>&ensp;{{articleBrief.issueTime}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
    import cookie from 'js-cookie'

    export default {
        name: 'FreeAll',
        data() {
            return {
                isFree: 0,
                //文章简介
                articleBriefs: [
                //    typeof {
                //         author: '张三',
                //         issueTime: new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate(),
                //         title: '',
                //         //评论数
                //         commentNum: 144,
                //         //浏览数
                //         glanceNum: 666,
                //         //收藏数
                //         collectNum: 122
                //     },
                //     {
                //         author: '李四',
                //         issueTime: new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate(),
                //         title: '',
                //         commentNum: 144,
                //         glanceNum: 666,
                //         collectNum: 123
                //     },
                    // {
                    //     author: '王五',
                    //     issueTime: new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate(),
                    //     title: '',
                    //     commentNum: 2374,
                    //     glanceNum: 9999,
                    //     collectNum: 1253
                    // },
                    // {
                    //     author: '赵六',
                    //     issueTime: new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate(),
                    //     title: '',
                    //     commentNum: 888,
                    //     glanceNum: 1200,
                    //     collectNum: 146
                    // },
                    // {
                    //     author: '孙七',
                    //     issueTime: new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate(),
                    //     title: '',
                    //     commentNum: 88,
                    //     glanceNum: 200,
                    //     collectNum: 66
                    // },
                    // {
                    //     author: '周八',
                    //     issueTime: new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate(),
                    //     title: '',
                    //     commentNum: 999,
                    //     glanceNum: 1221,
                    //     collectNum: 888
                    // }
                ],
                //种类
                categories: [],
                //模拟用户登录
                testuser:{
                    id: "1320603053587730433",
                    name:'sef',
                    phone:'',
                    email:'',
                    updatedTime:'2020/11/3',
                    updatedPwdtime:'2020/11/5',
                },
                user:{
                    name:'',
                    phone:'',
                    email:'',
                    updatedTime:'1970/1/1'
                },
            }
        },
        created() {
            //this.getUser()
            this.initCategories();
            this.findArticleBriefs();
            console.log(this.categories)
            
        },
        methods: {
            // 模拟热门推荐菜单类别，除了“全部”菜单项，列举出其他所有的热门推荐
            initCategories() {
                let routers = this.$router.options.routes;
                for (let router of routers) {
                    if (router.name == 'Layout') {
                        for (let childRouter of router.children) {
                            if (childRouter.name !== 'All') {
                                this.categories.push(childRouter.name);
                            }
                        }
                    }
                }
            },
            // 点击文章标题时触发显示文章具体内容
            watchContent(category, articleBrief) {
                articleBrief.title = category;
                if (!this.isFree) {
                    this.$router.push({
                        path: '/articleContent',
                        query: {
                            author: articleBrief.author,
                            issueTime: articleBrief.issueTime,
                            title: articleBrief.title,
                            commentNum: articleBrief.commentNum,
                            glanceNum: articleBrief.glanceNum,
                            collectNum: articleBrief.collectNum
                        }
                    })
                } else {
                    this.$router.push({
                        path: '/articleDetails'
                    })
                }
            },
            findArticleBriefs(){
                //执行了findArticleBriefs
                console.log("执行了findArticleBriefs")
                this.$http.post("http://localhost:9999/demo3/demo3/findAllByClass/"+this.isFree,this.categories).then(res=>{
                    console.log(res.data)
                    this.articleBriefs=res.data
                    console.log("findAll返回值")
                })
            },
            //从cookie中获取用户信息
            getUser(){
                // cookie.set("user",this.testuser,{domain: "localhost"})
                // this.user=JSON.parse(cookie.get("user"))
                // console.log(this.user.phone)
                // console.log(this.user)
                

            },
            
        }
    }
</script>
<style>
    .free-all-detail {
        margin-top: 2%;
        margin-left: 1%;
    }
    .free-all-detail-info {
        margin-top: 3%;
        font-size: 14px;
        color: #909399;
    }
    .free-all-detail-info>.el-avatar {
        vertical-align: bottom;
    }
    .free-all-detail-title {
        font-size: 24px;
        cursor: pointer;
    }
    .free-all-contrainer .el-row {
        width: 100%;
    }
    .free-all-details>.el-col {
        margin: 1% 2%;
        -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
        -moz-box-shadow:0px 3px 3px #c8c8c8 ;
        box-shadow:0px 3px 3px #c8c8c8 ;
    }
    .free-all-contrainer .el-image {
        width: 100%;
        height: 90px;
        vertical-align: middle;
    }
    .free-all-condition {
        margin: 1% auto;
        -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
        -moz-box-shadow:0px 3px 3px #c8c8c8 ;
        box-shadow:0px 3px 3px #c8c8c8 ;
    }
    .free-all {
        margin: 1% auto;
    }
</style>